Debugging en VSCode

Como depurar el código de angular desde Visual Studio Code

Para poder depurar una aplicación de angular primero tenemos que lanzarla como haríamos normalmente con el comando ng serve.

IMPORTANTE: el ng-serve debemos de lanzarlo desde una terminal del propio VSCode, si no la depuración no funcionará bien del todo.

Para poder depurar nestra aplicación angular tendremos que añadir la siguiente configuración al archivo launch.json localizado en la carpeta .vscode de nuestro proyecto, en caso de que no tengamos el archivo podemos autogenerarlo en "Run and debug" > "Add configuration":

En este archivo tendremos un contenido como el siguiente:

Para poder ejecutar la aplicación en Chrome usando la depuración tendremos que añadir una opción de lanzamiento igual que la que hay actualmente pero sin la linea "preLaunchTask": "npm: start"

{
  "name": "ng debugging",
  "type": "pwa-chrome",
  "request": "launch",
  "url": "http://localhost:4200/"
},

El archivo quedaría tal que así:

Una vez añadido esto guardamos el archivo y en la sección de Run and Debug podremos lanzar el navegador en modo depuración pulsando en "ng debugging"

Al ejecutarse el navegador con esta opción podremos establecer breakpoints y consultar las variables durante la ejecución del código:

Página vscode-js-debug Nightly Extension

Por defecto VSCode incluye el depurador js-debug si queremos podemos intalar la extensión Nightly que es una versión mas moderna de dicho depurador, para instalarla tenemos que seguir estos pasos:

• Abrir la pestaña de extensiones y buscar: @builtin @id:ms-vscode.js-debug
• Desactivar la extensión (está es la extensión antigua de js-debug)
• Buscar la extension: @id:ms-vscode.js-debug-nightly
• Instalamos la extensión y reiniciamos el VSCode

El Nightly funciona exactamente igual que el js-debug, no hay que hacer nada distinto.

Si estamos depurando un código que contiene funciones async/await nos encontraremos con situaciones en las que la clase entera sale como undefined y no podremos consultar el valor de ninguna variable:

En este caso podemos consultar las variables dentro del apartado Closure del depurador:

Si queremos poner una variable en el watch podemos hacerlo usando _this como prefijo, en este caso _this.title.

Angular | debugging